<template>
  <div>
    <!-- 1.登录头部导航提示 -->
    <van-nav-bar title="品牌详情">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
    </van-nav-bar>

    <!-- 2. 大图片 -->
    <div class="con">
      <img :src="goodsObj.app_list_pic_url" alt="">
      <span class="my-text-title">{{goodsObj.name}}|{{goodsObj.floor_price}}</span>
    </div>
    <!-- 3.详情 -->
    <p class="goods_text">
      {{goodsObj.simple_desc}}
    </p>
  </div>
</template>

<script>
import { getDetailData } from "@/api/homeAPI.js";
export default {
  name: "details",
  data() {
    return {
      idObj: this.$route.query,
      goodsObj: {},
    };
  },
  created() {
    this.getDetailDataHandler();
  },
  methods: {
    async getDetailDataHandler() {
      try {
        let res = await getDetailData(this.idObj);
        this.goodsObj = res.data.data.brand;
        console.log(res.data.data.brand);
      } catch (err) {
        console.log(err.message);
      }
    },
  },
};
</script>

<style scoped lang="scss">
// 238, 10, 36
::v-deep .van-nav-bar__content {
  background-color: rgb(238, 10, 36);
  border: 1px solid rgb(238, 10, 36);
}
::v-deep .van-nav-bar__title.van-ellipsis,
::v-deep .van-icon-arrow-left {
  color: #fff;
}
.con{
  position: relative;
  border-bottom: 1px solid #000;
  overflow: hidden;
  img{
    width: 100vw;
    vertical-align: middle;
  }
  .my-text-title{
    font-size: 30px;
    color: #fff;
    font-weight: bolder;

    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
    bottom: 0;
    margin: auto;
    text-align: center;
  }
}
.goods_text{
  font-size: 32px;
  color: #666;
  padding: 40px;
  text-indent: 2em;
}
</style>
